<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h1{
				text-align: center;
				padding: 50px;
			}
			canvas{
				display: block;
				margin: 0 auto;
				border: solid 1px black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.querySelector("canvas");
				var ctx = canvas.getContext("2d");
				fn();
				setInterval(fn,1000);
				function fn(){
					canvas.width = 500;
					canvas.width = 500;
					//改变坐标原点
					ctx.translate(250,250);
					//表盘
					ctx.arc(0,0,200,0,360*Math.PI/180,false);
					ctx.strokeStyle = "red";
					ctx.lineWidth = 3;
					var crg = ctx.createRadialGradient(0,0,0,0,0,200);
					//添加渐变色
					crg.addColorStop(0,"white");
					crg.addColorStop(1,"blue");
					//关键点，把渐变设置到 填充或描边的样式
					ctx.fillStyle=crg;
					ctx.fill();
					ctx.stroke();
					ctx.beginPath();
					ctx.arc(0,0,194,0,360*Math.PI/180,false);
					ctx.stroke();
					
					//画刻度 12，3，6，9
					ctx.beginPath();
					ctx.fillStyle="red";
					for(var i=0;i<4;i++){
						ctx.fillRect(-5,-194,10,20);
						ctx.rotate(90*Math.PI/180);
					}
					
					//画刻度，1，2，3，4...12
					for(var i=0;i<12;i++){
						ctx.fillRect(-4,-194,8,14);
						ctx.rotate(30*Math.PI/180);
					}
					
					//画刻度，1，2，3，4...60
					for(var i=0;i<60;i++){
						ctx.fillRect(-2,-194,4,10);
						ctx.rotate(6*Math.PI/180);
					}
					
					var d = new Date();
					var h = d.getHours();
					var m = d.getMinutes();
					var s = d.getSeconds();
					ctx.save();
					//时针
					ctx.beginPath();
					ctx.fillStyle="brown"
					ctx.rotate((h+m/60+s/3600)*360*Math.PI/180/12);
					ctx.fillRect(-7,-50,14,80)
					ctx.moveTo(0,-80);
					ctx.lineTo(-14,-50);
					ctx.lineTo(14,-50);
					ctx.closePath();
					ctx.fill();
					
					ctx.restore();
					ctx.save();
					
					//分针
					ctx.beginPath();
					ctx.fillStyle="#0B2E13";
					ctx.rotate((m+s/60)*360*Math.PI/180/60);
					ctx.fillRect(-5,-90,10,120)
					ctx.moveTo(0,-110);
					ctx.lineTo(-10,-90);
					ctx.lineTo(10,-90);
					ctx.closePath();
					ctx.fill();
					
					ctx.restore();
					ctx.save();
					//秒针
					ctx.beginPath();
					ctx.fillStyle="plum";
					ctx.rotate((s)*360*Math.PI/180/60);
					ctx.fillRect(-3,-110,6,140)
					ctx.moveTo(0,-140);
					ctx.lineTo(-6,-110);
					ctx.lineTo(6,-110);
					ctx.closePath();
					ctx.fill();
					
					//圆心
					ctx.beginPath();
					ctx.arc(0,0,10,0,360*Math.PI/180,false);
					ctx.fillStyle = "black";
					ctx.fill();
				}	
				
			}
		</script>
	</head>
	<body>
		<h1>canvas实现时钟效果123</h1>
		<canvas width="500" height="500"></canvas>
	</body>
</html>
